<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bootstrap 实例 - 边框表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">增加</button>
  <table class="table table-bordered" id="myTable">
    <thead>
      <tr>
        <th>名称</th>
        <th>城市</th>
        <th>地点</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="myBody">
      <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
    </tbody>
  </table>
  <!-- 删除弹出框 -->
  <div class="modal fade" id="deleteData" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">删除</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          确认要删除该数据吗？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary del-confirm-but" id="confirmDelete">确认</button>
        </div>
      </div>
    </div>
  </div>



  <!-- 新增弹框 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
         
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group row">
              <div class="col-6">id:</div>
              <input type="text" class="col-6" placeholder="分类名称" name="name">
            </div>
            <div class="form-group row">
              <div class="col-6">城市：</div>
              <input type="text" class="col-6" placeholder="分类名称" name="city">
            </div>
            <div class="form-group row">
              <div class="col-6">地点：</div>
              <input type="text" class="col-6" placeholder="分类名称" name="dress">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="saveAdd">保存</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>



  <!-- 编辑弹出框 -->
  <div class="modal fade" id="bjModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">编辑</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="row">
              <label class="col-sm-3">名称:</label>
              <input id="newId" disabled type="text" class="col-sm-5">
            </div>
            <br>
            <div class="row">
              <label class="col-sm-3">城市：</label>
              <input id="name" type="text" class="col-sm-5">
            </div>
            <br>
            <div class="row">
              <label class="col-sm-3">地点:</label>
              <input id="city" type="text" class="col-sm-5">
            </div>
            <br>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="cancellation">取消</button>
          <button type="button" class="btn btn-primary" id="confirmBtn">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>


  <script>
    const data = [
      { id: 1, name: "李四", city: "重庆" },
      { id: 2, name: "张三", city: "成都" },
    ];

    let seqId = 23;

    function showData (data) {
      $("#myTable tbody").html("");
      for (let i = 0; i < data.length; ++i) {
        let item = data[i];
        $("#myTable tbody").append(`
                    <tr>
                        <td><input type="checkbox">&nbsp;${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.city}</td>
                        <td>
                        <span id='compile' data-id ="${item.id}" class="btn btn-primary" data-toggle="modal" data-target="#bjModal" >编辑</span>
                        <span id="delete" data-id ="${item.id}" class="btn btn-primary" data-toggle="modal" data-target="#deleteData">删除</span>
                        </td>
                    </tr>
                    `);
      }
    }
    showData(data);

     //新增
     $('#saveAdd').on('click', function () {
            //获取值
            let name = $("input[name=name]").val();
            let city = $("input[name=city]").val();
            let dress = $("input[name=dress]").val();
           
            let addObj = {
              id: ++seqId,
                name: name,
                city: city,
                dress: dress
            }
            data.push(addObj)
            $("#myModal").modal("hide");
            showData(data);
        });
        
        //单个删除
        $("#myTable tbody").on('click', '#delete', function (event) {
            //拿到当前点击对象
            let dataId = parseInt($(event.target).attr("data-id"));
             // 绑定删除事件，将要删除的id值，赋值给删除的确认弹窗。是因为，要实现确认才做删除，不确认不会做删除
            $('#confirmDelete').attr("dataId");
            $('#confirmDelete').click(function (event) {
                // 通过id 找到对应数据 并删除
                for (let i = 0; i < data.length; ++i) {
                    let item = data[i];
                    if (item.id == dataId) {
                        data.splice(i, 1)
                    }

                }
                $("#deleteData").modal("hide");
                // 基于新数据  刷新页面
            showData(data);
            });
        })


        //编辑
        //获取原来的值
        $("#myTable tbody").on('click', '#compile', function (event) {
            let dataId = parseInt($(event.target).attr('data-id'));
            console.log(dataId)
            //展示弹窗
            $("#bjModal").show();
            let currentbjData = data.find((item) => {
                return item.id === dataId;
            });
            //获取原来的值
            $('#newId').val(currentbjData.id);
            $('#name').val(currentbjData.name);
            $('#city').val(currentbjData.city);
        });
         // 关闭弹窗
         $("#cancellation").on('click', function () {
            $("#bjModal").modal("hide");
        })


        //点击保存 保存更改
        $('#confirmBtn').on('click', function () {
            // 获取input的值
            let newId = parseInt($('#newId').val());
            let name = $('#name').val();
            let city = $('#city').val();
            
            // 修改 数据
            for (let i = 0; i < data.length; ++i) {
                let itemData = data[i];
                if (itemData.id == newId) {
                    itemData.id = newId;
                    itemData.name = name;
                    itemData.city = city;
                }
            }

            // 重新渲染
            showData(data);
            // 隐藏弹窗
            $("#bjModal").modal("hide");
        });

        


  </script>
</body>

</html>